<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap-5.1.0-dist/css/bootstrap.css">
    <style>
        body {
            background-color: #f5f4f9;
        }

        .dropdown-menu {
            box-shadow: 0 10px 30px 0 rgb(31 45 61 / 26%);
            color: #18113c;
        }

        .y {
            height: 408px;
        }

        .icon-sahpe {
            width: 48px;
            height: 48px;
        }

        .s button {
            top: 60%;
        }

        .s button:hover {
            background-color: #7f00cf !important;
            color: white
        }

        .s button:first-child {

            left: -60px;
        }

        .s button:last-child {
            right: -60px;
        }

        .auto {
            overflow: auto !important;
        }

        #lbt,
        #lbt2,
        #lbt3 {
            transition: all 1s;
        }
    </style>
    <link rel="stylesheet" href="./图片插件/iconfont.css">
    <script src="./css/jQuery v3.6.0.min.js"></script>
</head>

<body>

    <div class="row w-100 ">
        <div class="col">
            <nav class="navbar navbar-expand-lg navbar-light bg-white">
                <div class="container-fluid">
                    <img src="./img/logo.svg" alt="" class="navbar-brand">
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                            <!-- 第一个 -->
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    Browse
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><a class="dropdown-item" href="#">Web Development
                                        </a>
                                    </li>
                                    <li><a class="dropdown-item" href="#"> Design</a></li>
                                    <li><a class="dropdown-item" href="#">Mobile App</a></li>
                                    <li><a class="dropdown-item" href="#">IT Software</a></li>
                                    <li><a class="dropdown-item" href="#"> Marketing</a></li>
                                    <li><a class="dropdown-item" href="#"> Music</a></li>
                                    <li><a class="dropdown-item" href="#">Life Style</a></li>
                                    <li><a class="dropdown-item" href="#"> Business</a></li>
                                    <li><a class="dropdown-item" href="#"> Photography</a></li>
                                </ul>
                            </li>
                            <!-- 第二个 -->
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    Landings
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><a class="dropdown-item" href="#"> LANDINGS</a></li>
                                    <li><a class="dropdown-item" href="#"> Courses</a></li>
                                    <li><a class="dropdown-item" href="#">Lead Course</a></li>
                                    <li><a class="dropdown-item" href="#">Request Access</a></li>
                                    <li><a class="dropdown-item" href="#"> SaaS</a></li>
                                </ul>
                            </li>
                            <!-- 第三个 -->
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    Pages
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><a class="dropdown-item" href="#">Courses</a></li>
                                    <li><a class="dropdown-item" href="#">Paths</a></li>
                                    <li><a class="dropdown-item" href="#">Blog</a></li>
                                    <li><a class="dropdown-item" href="#">Career</a></li>
                                    <li><a class="dropdown-item" href="#">Specialty</a></li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="#">About</a></li>
                                    <li><a class="dropdown-item" href="#">Help Center</a></li>
                                    <li><a class="dropdown-item" href="#">Pricing</a></li>
                                    <li><a class="dropdown-item" href="#">Compare Plan</a></li>
                                    <li><a class="dropdown-item" href="#">Contact</a></li>
                                </ul>
                            </li>
                            <!-- 第四个 -->
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    Accounts
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><a class="dropdown-item" href="#">ACCOUNTS</a></li>
                                    <li><a class="dropdown-item" href="#">Instructor</a></li>
                                    <li><a class="dropdown-item" href="#">Students</a></li>
                                    <li><a class="dropdown-item" href="#">Admin</a></li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="#">Sign In</a></li>
                                    <li><a class="dropdown-item" href="#">Sign Up</a></li>
                                    <li><a class="dropdown-item" href="#">Forgot Password</a></li>
                                    <li><a class="dropdown-item" href="#">Edit Profile</a></li>
                                    <li><a class="dropdown-item" href="#">Security</a></li>
                                    <li><a class="dropdown-item" href="#">Social Profiles</a></li>
                                    <li><a class="dropdown-item" href="#">Notifications</a></li>
                                    <li><a class="dropdown-item" href="#">Privacy Settings</a></li>
                                    <li><a class="dropdown-item" href="#">Delete Profile</a></li>
                                    <li><a class="dropdown-item" href="#">Linked Accounts</a></li>
                                </ul>
                            </li>
                            <!-- 第五个 -->
                            <li class="nav-item dropdown">
                                <a class="nav-link fw-bold " href="#" role="button" data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    …
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                </ul>
                            </li>
                            <li>
                                <input class="form-control me-2" type="search" placeholder="Search Courses"
                                    aria-label="Search">
                            </li>

                        </ul>
                        <form class="d-flex">
                            <button class="btn btn-outline-success" type="submit">Search</button>
                        </form>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <div class="w-100 bg-primary bg-opacity y">
        <div class="container">
            <div class="row">
                <div class="card mb-3 border-0 bg-transparent p-0">
                    <div class="row g-0 justify-content-between">
                        <div class="col-md-5">
                            <div class="card-body text-white d-flex align-content-center flex-wrap h-100">
                                <h1 class="card-title fw-bold">Welcome to Geeks UI
                                    Learning Application</h1>
                                <p class="card-text text-white-50 fs-4">Hand-picked Instructor and expertly crafted
                                    courses, designed for the modern students and
                                    entrepreneur.</p>
                                <p class="card-text">
                                    <button type="button" class="btn btn-success"> Browse Courses</button><button
                                        type="button" class="btn btn-light"> Are You Instructor?</button></p>
                            </div>
                        </div>
                        <div class="col-md-6 ">
                            <img src="./img/hero-img.png" class="img-fluid rounded-start float-end" alt="...">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="w-100 shadow-sm bg-white">


        <div class="container">
            <div class="row">

                <div class="card-group">
                    <div class="card flex-row align-items-center border-0">
                        <span
                            class="icon-sahpe icon-lg bg-warning bg-opacity-25  rounded-circle text-center text-dark-warning fs-4">
                            <i class="iconfont icon-yaoqinghaoyou"> </i>
                        </span>
                        <div class="card-body">
                            <h5 class="card-title"> 30,000 online courses</h5>
                            <p class="card-text">Enjoy a variety of fresh topics</p>
                        </div>
                    </div>
                    <div class="card flex-row align-items-center border-0">
                        <span
                            class="icon-sahpe icon-lg bg-warning bg-opacity-25  rounded-circle text-center text-dark-warning fs-4">
                            <i class="iconfont icon-yaoqinghaoyou"> </i>
                        </span>
                        <div class="card-body">
                            <h5 class="card-title">Expert instruction</h5>
                            <p class="card-text">Find the right instructor for you</p>
                        </div>
                    </div>
                    <div class="card flex-row align-items-center border-0">
                        <span
                            class="icon-sahpe icon-lg bg-warning bg-opacity-25  rounded-circle text-center text-dark-warning fs-4">
                            <i class="iconfont icon-yaoqinghaoyou"> </i>
                        </span>
                        <div class="card-body">
                            <h5 class="card-title">Lifetime access</h5>
                            <p class="card-text">Learn on your schedule</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12 mt-5 pt-4 mb-4 p-0 position-relative">
                <h4 class="mb-4">Recommended to you
                </h4>
                <div class="position-relative border-dark border-1 overflow-hidden" style="height: 380px;">
                    <div class="row g-4 position-absolute" id="lbt" style="width: 2350px;left: -335px;">
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-react.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-1.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-graphql.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-2.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-angular.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-3.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-python.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-4.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-graphql.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-5.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-angular.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-6.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-python.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-7.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="s">
                    <button type="button" class="btn bg-white rounded-circle position-absolute">&lt;</button>
                    <button type="button" class="btn bg-white rounded-circle position-absolute">&gt;</button>
                </div>
            </div>

            <div class="col-12 mt-5 pt-4 mb-4 p-0 position-relative">
                <h4 class="mb-4">Most Popular
                </h4>
                <div class="position-relative border-dark border-1 overflow-hidden" style="height: 380px;">
                    <div class="row g-4 position-absolute" id="lbt2" style="width: 2350px;left: -335px;">
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-gatsby.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-2.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-javascript.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-1.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-css.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-3.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-wordpress.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-4.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-javascript.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-1.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-css.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-3.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-wordpress.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-4.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="s">
                    <button type="button" class="btn bg-white rounded-circle position-absolute">&lt;</button>
                    <button type="button" class="btn bg-white rounded-circle position-absolute">&gt;</button>
                </div>
            </div>

            <div class="col-12 mt-5 pt-4 mb-4 p-0 position-relative">
                <h4 class="mb-4">Trending
                </h4>
                <div class="position-relative border-dark border-1 overflow-hidden" style="height: 380px;">
                    <div class="row g-4 position-absolute" id="lbt3" style="width: 2350px;left: -335px;">
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-react.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-1.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-graphql.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-2.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-angular.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-3.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-python.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-4.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-graphql.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-5.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-angular.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-6.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <img src="./img/course-python.jpg" class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">How to easily create a
                                        website with React
                                    </h5>
                                    <p class="card-text"><i class="iconfont icon-yaoqinghaoyou"></i> 2h 30M <i
                                            class="iconfont icon-yaoqinghaoyou"></i> Beginner</p>
                                    <p class="card-text">
                                        <span class="text-warning">
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            <i class="iconfont icon-yaoqinghaoyou"></i>
                                            4.5
                                        </span> (13,245)
                                    </p>
                                </div>
                                <div class="card-footer text-muted bg-white">
                                    <img src="./img/avatar-7.jpg" alt="" class="col-1 rounded-circle">
                                    Moris Mccoy
                                    <i class="iconfont icon-yaoqinghaoyou float-end"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="s">
                    <button type="button" class="btn bg-white rounded-circle position-absolute">&lt;</button>
                    <button type="button" class="btn bg-white rounded-circle position-absolute">&gt;</button>
                </div>
            </div>

            <div class="col d-flex py-3  justify-content-between border-top border-secondary">
                <div class="nav-link"> ◎2021 Geeks. All Rights Reserved. </div>
                <nav class="nav">
                    <div class="nav-link active" aria-current="page"> Privacy </div>
                    <div class="nav-link"> Terms </div>
                    <div class="nav-link">Feed back </div>
                    <div class="nav-link"> Support </div>
                </nav>
            </div>
        </div>
    </div>




    <script src="./css/bootstrap-5.1.0-dist/js/bootstrap.min.js"></script>
    <script>
        // 第一个
        var i = 1;
        (function () {
            $(".s button").eq(1).click(function () {
                i++;
                console.log("右边" + i);
                if (i >= 3) {
                    $(this).addClass("disabled");
                }
                $(".s button").eq(0).removeClass("disabled");
                $("#lbt").css("left", -i * 335 + "px");
            })
            $(".s button").eq(0).click(function () {
                console.log("左边" + i);
                i--;
                if (i < 1) {
                    $(this).addClass("disabled");
                }
                $(".s button").eq(1).removeClass("disabled");
                $("#lbt").css("left", -i * 335 + "px");
            })
        })(i)
        // 第二个
        var p = 1;
        (function () {
            $(".s button").eq(3).click(function () {
                p++;
                // console.log("右边" + i);
                if (p >= 3) {
                    $(this).addClass("disabled");
                }
                $(".s button").eq(2).removeClass("disabled");
                $("#lbt2").css("left", -p * 335 + "px");
            })
            $(".s button").eq(2).click(function () {
                // console.log("左边" + i);
                p--;
                if (p < 1) {
                    $(this).addClass("disabled");
                }
                $(".s button").eq(3).removeClass("disabled");
                $("#lbt2").css("left", -p * 335 + "px");
            })
        })(p)
        // 第三个
        var l = 1;
        (function () {
            $(".s button").eq(5).click(function () {
                l++;
                console.log("右边" + l);
                if (l >= 3) {
                    $(this).addClass("disabled");
                }
                $(".s button").eq(4).removeClass("disabled");
                $("#lbt3").css("left", -l * 335 + "px");
            })
            $(".s button").eq(4).click(function () {
                console.log("左边" + l);
                l--;
                if (l < 1) {
                    $(this).addClass("disabled");
                }
                $(".s button").eq(5).removeClass("disabled");
                $("#lbt3").css("left", -l * 335 + "px");
            })
        })(l)
    </script>
</body>

</html>